<template>
  <div style="margin-bottom: 100px">
    <div class="export">
      <div v-if="rid == 0" class="export_button">
        <!-- <p>请选择数据类型：</p> -->
        <!-- <el-button v-for="(item,index) in typeArr" :key="index" :type="arr.indexOf(item.id)==-1?'':'primary'" @click="clickType(item.id)">{{item.role_name}}</el-button> -->
        <el-select v-model="types" clearable placeholder="请选择用户类型" @change="changeVal">
          <el-option v-for="item in typeArr" :key="item.id" :label="item.role_name" :value="item.id" />
        </el-select>
        <!-- <el-button  type="">科技局</el-button> -->
      </div>
      <div>
        <el-button v-if="rid == 0" type="primary" @click="exportVisible = true">
          导出
        </el-button>
      </div>
    </div>
    <!-- <div class="zl_box">
      <div class="zl_item" v-for="(item,index) in data.number" :key="index">
    <div class="contents">-->
    <!--  <p :class="item.bg">
            <svg  class="icon" aria-hidden="true">
              <use :href="item.icon"></use> 
            </svg>
    </p>-->
    <!-- <p class="add"><span class="ser_bor">{{item.title}}</span></p>
          <p class="add">上周新增</p>
          <p class="num">{{item.count}}</p>
          <p class="title">平台总量：{{item.num}}</p>
        </div>
      </div>
    </div>-->

    <div class="news">
      <el-row :gutter="20">
        <el-col :span="6" style="" v-for="item in newsObj" :key="item.name" >
          <div class="newsItem" @click='getList(item)'>
            <div class="ItemBox">
              <svg class="svgIcon" aria-hidden="true">
                <use :href="'#' +item.icon" />
              </svg>
              <div class="textBox">
                <div class="titleText">{{ item.name }}<span>{{ item.today > 0 ? '+' + item.today : item.today }}</span></div>
                <div class="num">{{ item.num }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="home">
      <div class="home_item">
        <div class="home_head">
          <p class="dataTitle">专利管家</p>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #5b76f9" />
            <div class="sq_content_color">推送服务企业量</div>
          </div>
          <div style="color: #5b76f9" class="sq_tilte4 ft_weight_700">
            {{ data.user_num }}
          </div>
        </div>

        <div class="monitor">
          <div>
            <div class="sq_content_color sq_tilte5">年费监控情报</div>
            <div class="newlyAdded">本期新增</div>
            <div class="newlyAddedvalue ft_weight_700">
              {{ data.send_fee }}
            </div>
            <div class="sq_content_color sq_tilte5" style="margin-bottom: 15px">
              本年度累计{{ data.send_fee_year }}次
            </div>
            <div class="sq_content_color sq_tilte5" style="margin-bottom: 55px">
              累计推送{{ data.send_fee_all }}次
            </div>
          </div>
          <div>
            <div class="sq_content_color sq_tilte5">专利监控情报</div>
            <div class="newlyAdded">本期新增</div>
            <div class="newlyAddedvalue ft_weight_700">
              {{ data.send_patent }}
            </div>
            <div class="sq_content_color sq_tilte5" style="margin-bottom: 15px">
              本年度累计{{ data.send_patent_year }}次
            </div>
            <div class="sq_content_color sq_tilte5" style="margin-bottom: 55px">
              累计推送{{ data.send_patent_all }}次
            </div>
          </div>
        </div>
      </div>

      <div class="home_item">
        <div class="home_head">
          <p class="dataTitle">海外援助</p>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #36c5fd" />
            <div class="sq_content_color">海外智联体</div>
          </div>
          <div style="color: #36c5fd" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/overseas/association">
              {{ base.overseas_smart }}
            </router-link>
          </div>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #36c5fd" />
            <div class="sq_content_color">海外实务指引</div>
          </div>
          <div style="color: #36c5fd" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/overseas/assistance">
              {{ base.overseas_guide }}
            </router-link>
          </div>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #36c5fd" />
            <div class="sq_content_color">海外警告函</div>
          </div>
          <div style="color: #36c5fd" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/overseas/assistance">
              {{ base.school_patent }}
            </router-link>
          </div>
        </div>
        <div class="regulations noframe">
          <div style="display: flex">
            <div class="spot" style="background-color: #36c5fd" />
            <div class="sq_content_color">海外预警报告</div>
          </div>
          <div style="color: #36c5fd" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/overseas/warning">
              {{ base.overseas_report }}
            </router-link>
          </div>
        </div>
      </div>

      <div class="home_item">
        <div class="home_head">
          <p class="dataTitle">双家工程</p>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #fea638" />
            <div class="sq_content_color">产学研对接活动</div>
          </div>
          <div style="color: #fea638" class="sq_tilte4 ft_weight_700">
            <div>{{ base.active }}</div>
          </div>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #fea638" />
            <div class="sq_content_color">成功案例</div>
          </div>
          <div style="color: #fea638" class="sq_tilte4 ft_weight_700">
            <div>{{ base.cases }}</div>
          </div>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #fea638" />
            <div class="sq_content_color">技术领域数量</div>
          </div>
          <div style="color: #fea638" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/enterprise">
              {{ base.school_patent }}
            </router-link>
          </div>
        </div>
        <div class="regulations noframe">
          <div style="display: flex">
            <div class="spot" style="background-color: #fea638" />
            <div class="sq_content_color">高校院所数量</div>
          </div>
          <div style="color: #fea638" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/enterprise/leader">
              {{ base.patent_school }}
            </router-link>
          </div>
        </div>
      </div>

      <div class="home_item">
        <div class="home_head">
          <p class="dataTitle">培训活动</p>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #4fdeb2" />
            <div class="sq_content_color">培训场次</div>
          </div>
          <div style="color: #4fdeb2" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/services/central">
              {{ base.train_num }}
            </router-link>
          </div>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #4fdeb2" />
            <div class="sq_content_color">每场培训的人数</div>
          </div>
          <div style="color: #4fdeb2" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/services/central">
              {{ base.person_num }}
            </router-link>
          </div>
        </div>
        <div class="regulations">
          <div style="display: flex">
            <div class="spot" style="background-color: #4fdeb2" />
            <div class="sq_content_color">累计培训人数</div>
          </div>
          <div style="color: #4fdeb2" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/services/central">
              {{ base.all_person }}
            </router-link>
          </div>
        </div>
        <div class="regulations noframe">
          <div style="display: flex">
            <div class="spot" style="background-color: #4fdeb2" />
            <div class="sq_content_color">暖企行动企业走访次数</div>
          </div>
          <div style="color: #4fdeb2" class="sq_tilte4 ft_weight_700">
            <router-link target="_blank" to="/web/news">
              {{ base.visit_num }}
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="home">
      <div v-for="(item, index) in data.dataEcharts" :key="index" class="home_item">
        <div class="home_item_head">
          <div class="Subhead">
            <div>
              <svg class="svgIcon" aria-hidden="true">
                <use :href="item.iconfont" />
              </svg>
            </div>
            <div class="sq_content_color">
              {{ item.title }}
            </div>
            <div class="increase">+{{ item.new }}</div>
          </div>
          <div class="total">
            {{ item.name }}
          </div>
        </div>

        <div>
          <PriEchart :id="item.id" :color="item.color" :title="item.title" :bar="item.channelBar"
            :data="item.channelData" />
        </div>
      </div>
    </div>
    <ExportUser :statistics="Statistics" :export-visible="exportVisible" :role="typeArr" @Determine="Determine" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { statistics, getRoleAll, statisticsBase, statisticsQuantity } from "@/api/admin";
import ExportUser from "@/components/ExportUser";
import PriEchart from "@/components/PriEchart";
export default {
  components: {
    PriEchart,
    ExportUser,
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      arr: [],
      typeArr: [],
      types: [],
      exportVisible: false,
      Statistics: 1,
      base: [],
      newsObj: {},
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "roles",
      "type",
      "is_admin_view",
      "rid",
    ]),
  },
  async mounted() {
    this.typeArr = await getRoleAll();
    // this.arr = this.typeArr.map(item=>item.id)
    this.data = await statistics({
      role_id: this.$store.getters["rid"],
    });
    this.Base();

    statisticsQuantity().then((res) => {
      // console.log(res, '1161616aasd');
      this.newsObj = res;
    });
  },
  methods: {
    getList(item){
      let type = 1
      if(item.name == '登录量'){
        type = 1
      }else if (item.name == '搜索量'){
        type = 2
      }else if (item.name == '消息已读'){
        type = 3
      }else if (item.name == '监控已读'){
        type = 4
      }
      this.$router.push({
        path: '/dataShow/newList',
        query: {
          type: type
        }
      })
    },
    async Base() {
      this.base = await statisticsBase();
    },
    test() {
      let target = this.$refs.target;
      target.setAttribute(
        "href",
        window.location.origin + "/web/overseas/association"
      );
      target.click();
    },
    Determine() {
      this.exportVisible = false;
    },
    async changeVal(val) {
      // console.log(val, this.types);
      this.data = await statistics({
        role_id: this.types,
      });
    },
    async clickType(id) {
      if (this.arr.indexOf(id) != -1) {
        this.arr.splice(this.arr.indexOf(id), 1);
        this.data = await statistics({
          role_id: this.arr,
        });
      } else {
        this.arr.push(id);
        this.data = await statistics({
          role_id: this.arr,
        });
      }
      // try{
      //   this.arr.push(id)
      //   const res =await statistics({role_id:this.arr});
      // } catch(e){
      //   this.$message.error(e.message);
      // }
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="less">

.dataTitle {
  font-size: 28px;
  font-weight: 700;
}

.export {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89%;

  .export_button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
  }
}

.ser_bor {
  position: relative;
}

.ser_bor::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  height: 2px;
  width: 30px;
  background-color: #d6d6d6;
}

.active1 {
  background: #daedff;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 50px;
}

.active2 {
  background: #ebeafa;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 50px;
}

.active3 {
  background: #ffefd8;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 50px;
}

.active4 {
  background: #e3f8e6;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 50px;
}

.active5 {
  background: #f5f8e0;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 50px;
}

.active6 {
  background: #f9dfdf;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 50px;
}

.zl_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 33px 22px;

  .zl_item {
    text-align: center;
    // width: 219px;
    width: 15%;
    height: 219px;
    background: #ffffff;
    border-radius: 10px;
    margin-right: 16px;
    margin-bottom: 20px;

    .contents {
      margin: 25px auto;

      .add {
        margin: 33px auto 0px;
      }

      .num {
        font-size: 42px;
        font-weight: bold;
        color: #3e4a66;
        margin: 10px auto;
      }

      .cont {
        color: #3e4a66;
        margin: 20px auto;
      }

      .title {
        font-size: 16px;
        font-weight: 400;
        color: #409eff;
      }
    }
  }
}

.news {
  margin: 33px 22px;

  .newsItem {
    padding: 20px 20px;
    border-radius: 10px;
    background-color: #fff;
    margin-right: 20px;
    cursor: pointer;
    .ItemBox {
      display: flex;
      // justify-content: center;
      .svgIcon {
        width: 60px;
        height: 60px;
      }
      .textBox {
       line-height: 28px; 
       .titleText {
        color: #0d0d10;
        font-size: 20px;
        font-weight: bold;
        span {
          font-size: 16px;
          background-color: #5975f7;
          color: #fff;
          border-radius: 8px;
          padding: 0px 4px;
          margin:  0 0 0 9px;
        }
       }
       .num  {
        font-weight: bolder;
        font-size: 24px;
        color: #74757f;
       }
      }
    }
  }
}

.home {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  // justify-content: space-between;
  margin: 33px 22px;

  .home_item {
    width: 23%;
    // width: 341px;
    // height:320px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin-right: 20px;

    .home_item_head {
      // border-bottom: 1px solid #d6d6d6;
      margin: 0 17px;

      .Subhead {
        display: flex;
        align-items: center;
        margin: 20px 0 10px 0;

        .iconfont {
          margin-right: 8px;
          font-size: 19px;
        }
      }
    }
  }

  .Early {
    height: 283px;
  }

  .Early_item {
    display: flex;
    // justify-content: space-around;
    align-items: center;
    margin: 20px 15px;

    .early_num {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      border: 6px solid #ea6868;
      background-color: #ffffff;
      text-align: center;
      line-height: 1.4;
      font-size: 42px;
      font-weight: 400;
      color: #1f2e4c;
    }

    .Unchecked {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background-color: #ffffff;
      text-align: center;
      line-height: 1.4;
      font-size: 42px;
      font-weight: 400;
      color: #1f2e4c;
      border: 6px solid #f2b6b6 !important;
    }

    .Notyet {
      font-size: 14px;
      font-weight: 400;
      color: #8f9bb3;
      margin-top: 15px;
    }

    .early_patent_info {
      width: 200px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(234, 104, 104, 1);
      margin-top: 15px;
    }

    .last_info {
      margin-left: 23px;
    }
  }
}

.comprehensive {
  display: flex;
  margin: 0 15px;

  .comprehensive_item {
    margin-right: 28px;

    .home_item_head {
      border-bottom: 1px solid #d6d6d6;
      margin: 0 17px;

      .Subhead {
        padding: 20px 0;

        .iconfont {
          margin-right: 8px;
          font-size: 19px;
        }
      }
    }
  }

  #echart {
    width: 572px;
    height: 395px;
    background-color: #fff;
  }
}

.Message {
  width: 395px;
  height: 395px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
}

.mess_box {
  margin: 0 15px;

  .Message_item {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d5d5d5;
  }

  .Message_item:last-child {
    border-bottom: none;
  }

  .context {
    width: 238px;
  }
}

.svgIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.icon {
  width: 20px;
  height: 20px;
}

.regulations {
  border-bottom: 1px dashed #637893;
  display: flex;
  justify-content: space-between;
  margin: 35px 20px;
  padding-bottom: 15px;
}

.home_head {
  margin: 20px 15px;
}

.monitor {
  display: flex;
  justify-content: space-evenly;
}

.newlyAdded {
  background-color: #5b76f9;
  color: #ffffff;
  font-size: 13px;
  width: 69px;
  padding: 3px 0px 3px 8px;
  margin: 25px 0px 25px 13px;
  border-radius: 5px;
}

.newlyAddedvalue {
  color: #5b76f9;
  font-size: 33px;
  margin-bottom: 30px;
}

.noframe {
  border: none;
}

.increase {
  display: flex;
  justify-content: center;
  background-color: #5b76f9;
  color: #ffffff;
  border-radius: 5px;
  // width: 50px;
  padding: 1px 2px;
  // padding-left: 5px;
  margin-left: 5px;
}

.total {
  font-size: 28px;
  font-weight: 700;
  margin-left: 30px;
}

@media (max-width: 1360px) {
  .home {
    flex-wrap: wrap;
    justify-content: flex-start;

    .home_item {
      margin-bottom: 20px;
    }
  }

  .comprehensive {
    flex-wrap: wrap;
    justify-content: flex-start;

    .comprehensive_item {
      margin-bottom: 20px;
    }

    #echart,
    .Message {
      width: 500px;
      height: 395px;
      background-color: #fff;
    }
  }
}

@media (max-width: 1280px) {
  .home {
    flex-wrap: wrap;
    justify-content: flex-start;

    .home_item {
      width: 30%;
      margin-bottom: 20px;

      .early_patent_info {
        width: 170px;
      }
    }
  }

  .comprehensive {
    flex-wrap: wrap;
    justify-content: flex-start;

    .comprehensive_item {
      margin-bottom: 20px;
    }

    #echart,
    .Message {
      width: 370px;
      height: 395px;
      background-color: #fff;
    }
  }
}
</style>
